<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>致谢名单</title>
    <link rel="stylesheet" href="/src/css/v50.css">
    <style>
        .barrage-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 100;
            overflow: hidden;
        }
        
        .financial-status {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.8s ease forwards;
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .barrage-item {
            position: fixed;
            white-space: nowrap;
            font-family: "Microsoft YaHei", sans-serif;
            font-weight: 500;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
            opacity: 0.9;
            transform: translateX(100vw);
        }
    </style>
    <script src="/src/js/site-config.js"></script>
    <script src="/src/js/common-elements.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.title = `${siteConfig.site.name} - 致谢名单`;
        });
    </script>
</head>
<body>
    <header></header>

    <div class="barrage-container" id="barrageContainer"></div>

    <main>
        <h1>致谢名单</h1>
        <div class="acknowledgment-content">
            <p style="text-align: center">感谢所有支持 LrcAPI 项目发展的朋友们。LrcAPI 是一个完全免费的开源项目，它的发展离不开社区成员的支持。在此特别感谢以下支持者的慷慨赞助</p>
            <p class="subtitle" style="text-align: center">*排名不分先后。如果我们遗漏了您的名字，请您随时通过赞助渠道联系我们，我们将及时更新。</p>
            <div id="financialStatus" class="financial-status" style="text-align: center; margin-bottom: 30px;">
                <p style="color: #666; margin-bottom: 10px;">项目运营状况</p>
                <h1 id="financialAmount" style="font-weight: bold; display: inline-block; margin: 10px 0;"></h1>
                <p style="color: #666; font-size: 0.9em;">
                    <span style="color: #2ecc71;">正值</span>代表项目有结余 | 
                    <span style="color: #e74c3c;">负值</span>代表项目需要赞助
                </p>
            </div>
            <div class="supporters-list">
                <div class="supporter-card">
                    <h3>项目赞助者</h3>
                    <ul class="supporters-grid" id="supportersGrid">
                        <!-- js生成 -->
                    </ul>
                </div>
            </div>
        </div>
    </main>

    <footer></footer>

    <script>
        class BarrageSystem {
            constructor() {
                this.container = document.getElementById('barrageContainer');
                this.viewportHeight = window.innerHeight;
                // 在这里定义你的弹幕颜色
                this.colors = [
                    '#FF6B6B',
                    '#4ECDC4',
                    '#45B7D1',
                    '#96CEB4',
                    '#FFEEAD',
                    '#D4A5A5',
                    '#9B59B6'
                ];
                
                // 弹幕区域范围
                this.topMargin = 50;    // 顶部边距
                this.bottomMargin = 100; // 底部边距
                
                // 监听窗口大小变化
                window.addEventListener('resize', () => {
                    this.viewportHeight = window.innerHeight;
                });
            }

            getColorByText(text) {
                return this.colors[Math.floor(Math.random() * this.colors.length)];
            }

            // 生成随机动画时长（12-20秒，用于调整弹幕滚动速度）
            getRandomDuration() {
                return 12000 + Math.random() * 8000;
            }

            // 生成随机垂直位置
            getRandomVerticalPosition() {
                const availableHeight = this.viewportHeight - this.topMargin - this.bottomMargin;
                return this.topMargin + Math.random() * availableHeight;
            }

            // 生成随机字体大小（14-24px）
            getRandomFontSize() {
                return 14 + Math.random() * 10;
            }

            addMessage(text) {
                const item = document.createElement('div');
                item.className = 'barrage-item';
                item.textContent = text;
                
                // 设置基本样式
                const fontSize = this.getRandomFontSize();
                const verticalPos = this.getRandomVerticalPosition();
                item.style.cssText = `
                    font-size: ${fontSize}px;
                    color: ${this.getColorByText(text)};
                    top: ${verticalPos}px;
                `;

                // 添加到容器
                this.container.appendChild(item);

                // 获取元素宽度（用于计算动画终点位置）
                const itemWidth = item.offsetWidth;
                const duration = this.getRandomDuration();

                // 创建并应用动画
                const animation = item.animate([
                    { transform: 'translateX(100vw)' },
                    { transform: `translateX(-${itemWidth}px)` }
                ], {
                    duration: duration,
                    easing: 'linear'
                });
                // 动画结束后移除元素
                animation.onfinish = () => item.remove();
            }
        }

        // 定义支持者卡片组件
        class SupporterCard extends HTMLElement {
            constructor() {
                super();
            }

            set supporter(data) {
                this.innerHTML = `
                    <div class="supporter-info">
                        <span class="supporter-name">${data.name}</span>
                        <span class="support-amount">￥${data.amount}</span>
                    </div>
                `;
            }
        }

        customElements.define('supporter-card', SupporterCard);

        // 模块控制器
        class ModuleController {
            constructor(config) {
                this.config = config;
                this.init();
            }

            init() {
                // 初始化财务状况显示
                if (this.config.financial.enabled) {
                    this.initFinancial();
                } else {
                    document.getElementById('financialStatus').style.display = 'none';
                }

                // 初始化弹幕系统
                if (this.config.barrage.enabled) {
                    this.initBarrage();
                } else {
                    document.getElementById('barrageContainer').style.display = 'none';
                }

                // 初始化支持者列表
                if (this.config.supporters.enabled) {
                    this.initSupporters();
                } else {
                    document.querySelector('.supporters-list').style.display = 'none';
                }
            }

            initFinancial() {
                const financial = this.config.financial;
                const element = document.getElementById('financialAmount');
                const startValue = 0;
                const endValue = financial.amount;
                const duration = financial.duration;
                const currency = financial.currency;
                
                // 设置颜色
                element.style.color = endValue >= 0 ? '#2ecc71' : '#e74c3c';
                
                // 使用 CSS cubic-bezier 实现动画效果
                const startTime = performance.now();
                
                function update(currentTime) {
                    const elapsed = currentTime - startTime;
                    const progress = Math.min(elapsed / duration, 1);
                    
                    // 使用缓动函数使动画更自然
                    const easeProgress = progress < 0.5 
                        ? 4 * progress * progress * progress 
                        : 1 - Math.pow(-2 * progress + 2, 3) / 2;
                    
                    const currentValue = startValue + (endValue - startValue) * easeProgress;
                    element.textContent = `${currency}${currentValue.toFixed(2)}`;
                    
                    if (progress < 1) {
                        requestAnimationFrame(update);
                    }
                }
                
                requestAnimationFrame(update);
            }

            initBarrage() {
                const barrageSystem = new BarrageSystem();
                const sendRandomMessage = () => {
                    const messages = this.config.barrage.messages;
                    const msg = messages[Math.floor(Math.random() * messages.length)];
                    barrageSystem.addMessage(msg);
                    setTimeout(sendRandomMessage, 500 + Math.random() * 1500);
                };
                sendRandomMessage();
            }

            initSupporters() {
                const supportersGrid = document.getElementById('supportersGrid');
                this.config.supporters.data.forEach(supporter => {
                    const li = document.createElement('li');
                    li.className = 'supporter-box';
                    const card = document.createElement('supporter-card');
                    card.supporter = supporter;
                    li.appendChild(card);
                    supportersGrid.appendChild(li);
                });
            }
        }

        // 初始化模块控制器
        document.addEventListener('DOMContentLoaded', () => {
            new ModuleController(siteConfig.acknowledgments);
        });
    </script>
</body>
</html>
